<template>
  <div id="app">
    <div class="movies">
      <Movies v-for="item in movies.playlists" :key="item.title" :data="item" ></Movies>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue,Provide } from 'vue-property-decorator';
import Movies from "./components/Movies.vue"
import httpWyy from '../models/wyy'

@Component({
  components: {
    Movies,
  },
})
export default class App extends Vue {
  @Provide() msg:string = "vue";
  @Provide() movies:object = {};
  async mounted() {
    this.movies = await httpWyy.httpHuayu(); 
    console.log(this.movies);
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.movies{
  width: max-content;
  margin: 0 auto ;
  display: grid;
  grid-template-columns:repeat(4,1fr);
  grid-gap: 20px;
}
</style>
